<template>
	<view class="content">
		<video class="video"
		id="video"
		 src="https://zm.xcx.letaohelper.com/static/1598172688598773.mp4"
		 ></video>
		 <view class="video-mask" :class="{active: !isViewAd}">
			 <view class="video-mask-content" @click="showAd">
				 点击观看广告后可播放视频
				 <view>
					 <image mode="widthFix" src="../../static/icon-click.png" alt="">
				 </view>
			 </view>
		 </view>
	</view>
</template>

<script>
	let rewardedVideoAd = null;
	export default {
		data() {
			return {
				videoEl: null,
				isViewAd: false
			}
		},
		onLoad() {
			this.videoEl = uni.createVideoContext('video');
			if(uni.createRewardedVideoAd){
			  rewardedVideoAd = uni.createRewardedVideoAd({ adUnitId: 'adunit-bef89975a6410609' })
			  rewardedVideoAd.onLoad(() => {
				console.log('onLoad event emit')
			  })
			  rewardedVideoAd.onError((err) => {
				console.log('onError event emit', err)
			  })
			  rewardedVideoAd.onClose((res) => {
				if (res && res.isEnded) {
				     this.isViewAd = true;
					 this.videoEl.play();
				   }
			  });
			}
		},
		methods: {
			showAd() {
				rewardedVideoAd.show();
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}
	image {
		height: auto;
	}
</style>
<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
	.video {
		width: 100%;
		height: 100%;
	}
	.video-mask {
		position: fixed;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: flex-end;
		display: none;
		&.active {
			display: flex;
		}
		.video-mask-content {
			background-color: #6d95e7;
			color: #fff;
			text-align: center;
			border-radius: 10rpx;
			padding: 40rpx 0 30rpx 0;
			margin-bottom: 100rpx;
			width: 90%;
			font-size: 24rpx;
			image {
				display: inline-block;
				width: 40rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>
